<template>
	<view style="padding:0rpx 40rpx">
		<FreeForm
		  ref="freeForm"
		  :requestData="list"
		  :defaultProps="defaultProps"
		  :defaultComponentsName="defaultComponentsName"
		  @getVal="getVal"
		  :uploadUrl="uploadUrl"
		  :uploadHeader="uploadHeader"
		  @c="c"
		></FreeForm>
		<u-button type="success" @click="submit">成功按钮</u-button>
	</view>
</template>
<script>
import FreeForm from "../components/FreeForm.vue";
export default {
  components: {
    FreeForm,
  },
  data() {
    // id 表单字段的id
    // type 表单字段的类型
    // must 是否必填
    // title 表单字段的中文名（动态表单的字段名称）
    // msg 表单字段的placeholder和必填提示
    // selectData 筛选数据
    // value 绑定的字段
	// requestData 后端返回数据
    // uploadUrl 上传文件地址
    // uploadHeader 上传时的请求头
    return {
      uploadUrl: "https://jsonplaceholder.typicode.com/posts/",
      uploadHeader: {
        Authorization: "1",
      },
	  // 新增时提交的数据
	  submitVo: {},
	  // 字段配置选项
	  defaultProps: {
		  must: 'mandatory', // 是否必填
		  title: 'descriptionChi', // 控件label
		  selectData: 'valueDict', // 下拉数据
		  value: 'value', // 下拉数据value
		  label: 'label', // 下拉数据label
		  msg: 'tip', // 控件占位符
		  type: 'fieldType' // 控件类型
	  },
	  defaultComponentsName: {
		  Input: 'INPUT', // 输入框
		  Textarea: 'MULTI_INPUT', // 多行输入框
		  Select: 'SELECT', //下拉框
		  Radio: 'RADIO', // 单选框
		  Checkbox: 'CHECKBOX', // 多选框
		  DatePicker: 'DATEPICKER', // 日期选择器
		  DateTimePicker: 'DATE_TIME_PICKER', // 日期时间选择器
		  Upload: 'SINGLE_PICTURE', // 单图上传
		  MultipleUpload: 'MULTI_PICTURE', // 多图上传
		  Cascader: 'CASCADER' // 级联选择器
	  },
	  // 动态json数据
      list: [
		{
		  fieldType: "INPUT",
		  mandatory: true,
		  descriptionChi: "输入框",
		  tip: "请输入",
		  valueDict: null,
		  value: '',
		},
  //       {
  //         id: 2,
  //         type: "Select",
  //         must: false,
  //         title: "我是下拉框",
  //         msg: "请选择",
  //         selectData: [
  //           { value: '1', label: "我是1" },
  //           { value: '2', label: "我是2" },
  //         ],
  //         value: '',
  //       },
  //       {
  //         id: 3,
  //         type: "Textarea",
  //         must: false,
  //         title: "多行输入框",
  //         msg: "请输入",
  //         selectData: null,
  //         value: '',
  //       },
  //       {
  //         id: 4,
  //         type: "Radio",
  //         must: false,
  //         title: "单选框",
  //         msg: "请选择",
		//   selectData: [
		//     { value: '1', label: "我是1" },
		//     { value: '2', label: "我是2" },
		//   ],
  //         value: '',
  //       },
		// {
		//   id: 5,
		//   type: "Checkbox",
		//   must: false,
		//   title: "复选",
		//   msg: "请选择",
		//   selectData: [
		// 	  { value: true, label: "我是1", id: 1 },
		// 	  { value: false, label: "我是2", id: 2 },
		//   ],
		//   value: [1],
		// },
  //       {
  //         id: 6,
  //         type: "DatePicker",
  //         must: false,
  //         title: "日期",
  //         msg: "请选择",
  //         selectData: null,
  //         value: '',
  //       },
		// {
		//   id: 7,
		//   type: "DateTimePicker",
		//   must: false,
		//   title: "日期时分秒",
		//   msg: "请选择",
		//   selectData: null,
		//   value: '',
		// },
  //       {
  //         id: 8,
  //         type: "Upload",
  //         must: true,
  //         title: "上传",
  //         msg: "请上传",
  //         selectData: null,
  //         value: [
		// 	  {
		// 		  url: require('../static/logo.png')
		// 	  }
		//   ]
  //       },
		// {
		//   id: 9,
		//   type: "MultipleUpload",
		//   must: false,
		//   title: "多图上传",
		//   msg: "请上传",
		//   selectData: null,
		//   value: [
		// 	  {
		// 		  url: require('../static/logo.png')
		// 	  },
		// 	  {
		// 		  url: require('../static/index.png')
		// 	  }
		//   ],
		// },
      ],
    };
  },
  methods: {
	c() {
		let obj = {
			a: 'Input'
		}
		obj[this.defaultComponentsName['Input']]
	},
    // 获取数据
    getVal(obj) {
	  this.list = obj.list
      console.log("回调到父组件的数据", obj);
      console.log("全量提交", this.list);
    },
    submit() {
	  console.log(this.list, 'list')
      this.$refs.freeForm.submit((res) => {
        if (res) {
          console.log("执行成功操作");
        } else {
          console.log("执行失败操作");
        }
      });
    },
  },
  onLoad() {
	  this.list.map((item) => {
		  if (item.title === '输入框') {
			  item.patternMsg = "只能包含字母或数字",
			  item.patternStr = /^[0-9a-zA-Z]*$/g
		  }
	  })
  }
};
</script>

<style lang="scss" scoped>
</style>
